import React, { useEffect, useState } from "react";
import { useNavigate } from "react-router-dom";
import LoginBox from "../LoginBox";
import style from "./style.less"

export default function LogIn() {
  const pcUrl = "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg9.51tietu.net%2Fpic%2F2019-091307%2F3llyra55rw33llyra55rw3.jpg&refer=http%3A%2F%2Fimg9.51tietu.net&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1655354483&t=8c92632332cef12cf9c694197fecf002"
  const phoneUrl = "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg1.doubanio.com%2Fview%2Frichtext%2Flarge%2Fpublic%2Fp132158677.jpg&refer=http%3A%2F%2Fimg1.doubanio.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1655353568&t=02be23e693e5262099394b0501331f26"
  const navigate = useNavigate()
  const [media, setMedia] = useState<'PC' | 'PHONE'>()

  window.onresize = function () {
    const width = window.screen.availWidth
    if (width > 767) {
      setMedia('PC')
    } else {
      setMedia('PHONE')
    }
  }

  useEffect(() => {
    const width = window.screen.availWidth
    if (width > 767) {
      setMedia('PC')
    } else {
      setMedia('PHONE')
    }
  }, [])

  return (
    <React.Fragment>
      <img className={style.bg} src={media === 'PC' ? pcUrl : phoneUrl} alt="" />
      <div className={style.box}>
        <LoginBox afterLogin={() => { navigate("/home");window.location.reload() }} />
      </div>
    </React.Fragment>
  )
}